<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" th:src="@{/css/login.css}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript"
            th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <style>body {
        background: white;
    }

    /* 容器的样式 */
    .container {
        margin: auto;
        width: 650px;
        height: 550px;
        position: relative;
    }

    .welcome {
        background: white;
        width: 650px;
        height: 415px;
        position: absolute;
        top: 25%;
        border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    }

    .pinkbox {
        position: absolute;
        top: -10%;
        left: 5%;
        background: darkgrey;
        width: 320px;
        height: 500px;
        border-radius: 5px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: all 0.5s ease-in-out;
        z-index: 2;
    }

    .nodisplay {
        display: none;
        transition: all 0.5s ease;
    }

    .leftbox,
    .rightbox {
        position: absolute;
        width: 50%;
        transition: 1s all ease;
    }

    .leftbox {
        left: -2%;
    }

    .rightbox {
        right: -2%;
    }

    /* 字体和按钮的样式 */
    h1 {
        font-family: "Open Sans", sans-serif;
        text-align: center;
        margin-top: 95px;
        text-transform: uppercase;
        color: #f6f6f6;
        font-size: 2em;
        letter-spacing: 8px;
    }

    .title {
        font-family: "Lora", serif;
        color: #8e9aaf;
        font-size: 1.8em;
        line-height: 1.1em;
        letter-spacing: 3px;
        text-align: center;
        font-weight: 300;
        margin-top: 20%;
    }

    .desc {
        margin-top: -8px;
    }

    .account {
        margin-top: 45%;
        font-size: 10px;
    }

    p {
        font-family: "Open Sans", sans-serif;
        font-size: 0.7em;
        letter-spacing: 2px;
        color: #8e9aaf;
        text-align: center;
    }

    span {
        color: white;
    }

    .flower {
        position: absolute;
        width: 150px;
        height: 150px;
        top: 45%;
        left: 27%;
        opacity: 0.8;
    }

    .smaller {
        width: 130px;
        height: 130px;
        top: 48%;
        left: 30%;
        opacity: 0.9;
    }

    button {
        padding: 12px;
        font-family: "Open Sans", sans-serif;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 11px;
        border-radius: 10px;
        margin: auto;
        outline: none;
        display: block;
    }

    button:hover {
        background: #eac7cc;
        color: #f6f6f6;
        transition: background-color 1s ease-out;
    }

    .button {
        margin-top: 3%;
        background: #f6f6f6;
        color: #ce7d88;
        border: solid 1px #eac7cc;
    }

    /* 表单样式 */
    form {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 7px;
    }

    .more-padding {
        padding-top: 35px;
    }

    .more-padding input {
        padding: 12px;
    }

    .more-padding .sumbit {
        margin-top: 45px;
    }

    .sumbit {
        margin-top: 25px;
        padding: 12px;
        border-color: #ce7d88;
    }

    .sumbit:hover {
        background: #1b6d85;
        background: #1b6d85;
    }

    input {
        background: white;
        width: 65%;
        color: white;
        border: none;
        border-bottom: 1px solid rgba(246, 246, 246, 0.5);
        padding: 9px;
        font-weight: 100;
    }

    input::placeholder {
        color: #f6f6f6;
        letter-spacing: 2px;
        font-size: 1.0em;
        font-weight: 100;
    }

    input:focus {
        color: white;
        outline: none;
        border-bottom: 1.2px solid rgba(255, 255, 255, 0.7);
        font-size: 1.0em;
        transition: 0.8s all ease;
    }

    input:focus::placeholder {
        opacity: 0;
    }

    label {
        font-family: "Open Sans", sans-serif;
        color: white;
        font-size: 0.8em;
        letter-spacing: 1px;
    }

    .checkbox {
        display: inline;
        white-space: nowrap;
        position: relative;
        left: -52px;
        top: 25px;
    }

    input[type=checkbox] {
        width: 15px;
        background: white;
    }

    .checkbox input[type=checkbox]:checked + label {
        color: #ce7d88;
        transition: 0.5s all ease;
    }
    </style>
</head>
<body>
<div class="container">
    <div class="welcome">
        <div class="pinkbox">
            <!-- 登录表单 -->
            <div class="signin">
                <h1>用户登录~~</h1>
                <form class="more-padding" id="loginForm" method="post" autocomplete="off">
                    <input style="background-color: darkgrey;" id="mobile" name="mobile"
                           type="text" placeholder="手机号码"
                           required="true" minlength="11" maxlength="11"/>
                    <input style="background-color: darkgrey;" id="password" name="password"
                           type="password" placeholder="密码" required="true" minlength="6" maxlength="16"/>
                    <button class="button sumbit" type="button" onclick="login()">Login</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function login() {
        doLogin();
    }

    function doLogin() {
        var inputPass = $("#password").val();
        var salt = g_passsword_salt;
        var str = "" + salt.charAt(0) + inputPass + salt.charAt(6);
        var password = md5(str);

        console.log("inputPass--->" + inputPass)
        console.log("salt--->" + salt)
        console.log("str--->" + str)
        console.log("password--->" + password)

        $.ajax({
            url: "/login/doLogin",
            type: "POST", data: {
                mobile: $("#mobile").val(), password: password
            }, success: function (data) {
                if (data.code == 200) {
                    alert(data.message)
                    window.location.href = "/goods/toList"
                } else {
                    alert(data.message)
                }
            }, error: function () {
                alert("失败");
            }
        });
    }
</script>
</html>